<template>
<div class="btn" :class="checked?' checkBtn':''">
    <slot></slot>
</div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps({
    checked:{
        type:Boolean,
        default:false
    }
})
</script>
<style scoped>
.btn{
    display: inline-block;
    padding: 5px 20px;
    background-image: url("/public/wei.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 10px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
    color: #1879ae;
}
.btn:hover{
    display: inline-block;
    padding: 5px 20px;
    background-image: url("/public/zhong.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
.checkBtn{
    background-image: url("/public/zhong.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
}
</style>